<template>
	<article class="kp-helpPronb" v-bind:style="{ height: pageHeight+'px' }">
		<!--酒店-->
		<div class="kp-al-box" v-if="helpnum=='1'">
			<div class="kp-mb-li">
				<div class="kp-mb-div" @click="helpHotel(1)">
					<span>1.如何在快票出行上预订国内酒店？</span>
					<em :class="showDetilenum==1?'active':''"></em>
				</div>
				<div class="kp-mbbot" v-show="showDetilenum==1">
					①查询酒店——②选择酒店 ——③填写酒店订单 ——④提交酒店订单——⑤快票确认订单</br>
					进入快票首页或点击“酒店”页面，然后按以下顺序操作：</br>
					A. 进入“酒店搜索”界面，输入入住城市，通过入住、离店日期、酒店名、地址、地标进行筛选，点击“搜索”；</br>
					B. 进入酒店列表页，搜索结果是默认排序的，您可以通过“筛选条件”缩小范围，选择您所需要的酒店产品，点击酒店名称后，即可查看该酒店的详细介绍，包括酒店概况、图片、交通地图、实地体验、酒店问答、附近酒店、设施等；</br>
					C. 选择入住酒店的时间，点击“预订”；</br>
					D. 在预订页面填写相关信息，确定入住、离店日期、预订间数，入住人和预订人等信息;</br>
					E. 确认无误后，点击“提交订单”。
				</div>
			</div>
			<div class="kp-mb-li">
				<div class="kp-mb-div" @click="helpHotel(2)">
					<span>2.预订酒店需要填写哪些信息？</span>
					<em :class="showDetilenum==2?'active':''"></em>
				</div>
				<div class="kp-mbbot" v-show="showDetilenum==2">
					如果您已选好酒店，点击预订后，填写入住人姓名和手机号码，并选好最晚到店时间即可。
				</div>
			</div>
			<div class="kp-mb-li">
				<div class="kp-mb-div" @click="helpHotel(3)">
					<span>3.如何确认我已经预订成功了？一般要等多久？</span>
					<em :class="showDetilenum==3?'active':''"></em>
				</div>
				<div class="kp-mbbot" v-show="showDetilenum==3">
					您在网上提交订单之后，并不意味着您的订房已获确认，一般在20分钟左右，我们会以短信、电话等方式通知您订房结果。节假日等待时间会稍长，还请您耐心等待。
				</div>
			</div>
			<div class="kp-mb-li">
				<div class="kp-mb-div" @click="helpHotel(4)">
					<span>4.预订时需要预付押金或房费吗？</span>
					<em  :class="showDetilenum==4?'active':''"></em>
				</div>
				<div class="kp-mbbot" v-show="showDetilenum==4">
					您在快票出行上挑选到合适的酒店后，根据订单显示金额付款即可，现付酒店免费预订（担保问题详见“信用卡担保”），在您提交订单收到快票的确认短信后，在入住当天最晚到时间前到酒店办理入住即可，房费是在酒店前台现付，预付酒店需提前支付房费进行预订，收到确认短信后，在入住当天最晚到达时间前办理入住即可。
				</div>
			</div>
			<div class="kp-mb-li">
				<div class="kp-mb-div" @click="helpHotel(5)">
					<span>5.拨打客服电话预订房间，与在网上预订有什么区别？</span>
					<em :class="showDetilenum==5?'active':''"></em>
				</div>
				<div class="kp-mbbot" v-show="showDetilenum==5">
					快票出行主推的订房模式是网络订房，客人网站或者客户端预订可以使用红包或卡券，电话预订没有相关优惠。
				</div>
			</div>
			<div class="kp-mb-li">
				<div class="kp-mb-div" @click="helpHotel(6)">
					<span>6.预订酒店时，需要注意哪些？</span>
					<em :class="showDetilenum==6?'active':''"></em>
				</div>
				<div class="kp-mbbot" v-show="showDetilenum==6">
					酒店信息中会有酒店备注，如入住酒店是否需要缴纳其他服务费、酒店是否提供您所需要的设施等。同时，请留意房型相关说明，如房型中的设施说明等。
				</div>
			</div>
		</div>
		<!--火车-->
		<div class="kp-al-box" v-if="helpnum=='2'">
			<div class="kp-mb-li">
				<div class="kp-mb-div" @click="helpHotel(1)">
					<span>1.预订服务协议</span>
					<em :class="showDetilenum==1?'active':''"></em>
				</div>
				<div class="kp-mbbot" v-show="showDetilenum==1">
					第一条 协议订立</br>
					1、本协议由平台用户（以下简称“用户”或“您”）通过在线点击同意的方式与提供本服务的河北易金信息科技服务有限公司（以下简称“本公司”）订立。</br>
					2、用户在使用本公司提供的服务前务必认真阅读本协议，一旦用户使用本公司提供的服务即表示用户同意与本公司签订本协议且同意受本协议之约束。</br>
					第二条 费用说明</br>
					订单总价 = 车票票面价*预订数量＋交通意外保险*预订数量（保险预订数量可以为零）。</br>
					车票票面价：车票票面实际价格。</br>
					交通保险费：交通意外险费20元/份，5元/份，2元/份。</br>
					第三条 </br>
					1、本公司官网现仅接受二代身份证及护照、台胞证、港澳通行证预订，其他证件暂不支持。</br>
					2、一张有效身份证件同一乘车日期同一车次限购一张车票。（儿童用成人的证件号情况除外）</br>
					3、同一笔订单可购买的车票数量不超过5张，如购票乘车人数超出5位，请分开预订。</br>
					4、儿童票购买说明：</br>
					A、儿童不能单独乘车，需至少一位成人陪同；</br>
					B、一名成年人旅客可以免费携带一名身高不足1.2米的儿童。如果身高不足1.2米的儿童超过一名时，一名儿童免费，其他儿童须购买儿童票；</br>
					C、身高在1.2米-1.5米的儿童需购买儿童票；</br>
					D、身高超过1.5米的儿童需购买全价票；</br>
					E、请根据儿童实际身高来购票，如在进站时由于儿童身高超过标准而无法进站的，本公司不承担任何责任；</br>
					F、购买儿童票时，须提供乘车儿童的有效身份证件信息（如户口本上的身份证信息）；未办理有效身份证件的，可以使用同行成年人的有效身份证件信息；</br>
					G、儿童票必须提前取票，凭有效证件原件及本公司发送给您的火车票订单号办理换票手续。</br>
					5、纸质车票信息会根据您预订时留下的乘车人信息自动生成，所以请在提交订单时务必严格按照您的有效证件信息填写， 如遇到生僻字等无法输入，请自行前往火车站购票。如因客户您自身原因导致无法换票，本公司不承担损失。</br>
					第四条 取票说明</br>
					1、使用二代身份证预订的客户，只需持预订时所使用的乘车人有效二代身份证到车站售票窗口、铁路客票代售点或车站自动售票机上办理换票手续，部分高铁站可持二代居民身份证直接检票进站。</br>
					2、如预订时使用的乘车人二代身份证无法识别或使用护照预订的客户，请持预订时留下的有效证件原件及本公司给您发送的火车票订单号至火车站售票点，由售票员核实后办理换票手续。</br>
					3、若您在预订成功后、换票前，不慎遗失有效身份证件，须由您本人到乘车站铁路公安制证口办理临时身份证明。 4、纸质火车票作为唯一的报销凭证，如客户您需要报销，请提前至火车站换取纸质车票。如您未提前换票而使用二代身份证直接进站，后期需要报销的，本公司概不提供发票。
					</br>
					第五条 退票及改签说明</br>
					退票：</br>
					1、订单一旦支付成功，即进入到本公司的出票系统，如因客户自身原因，不可申请票款全退。如因本公司原因，如无法顺利出票，客户可申请票款全退。</br>
					2、火车票未取纸质票且在距离订单中显示的火车发车时间2小时以上，客户可登陆本公司网站提交退票申请，本公司会尝试为您提交退票操作。中国铁路总公司收取的退票费规则为：开车前15天（不含）以上退票，不收取退票费；48小时以上，收取票价5%的退票费；24-48（含48）小时内，收取票价10%的退票费；24小时内的，收票价20%的退票费。2015春运期间（2.4~3.16），改签后退票手续费按票价20%收取。最终退款请以火车站实退为准。</br>
					3、火车票已取纸质票或确定退票时已距离订单中显示的火车发车时间2小时以内，本公司不接受退票申请，客户须携带预订时所使用的乘车人有效身份证件原件， 在列车开车前前往车站退票窗口办理相关退票手续，如因客户自身原因导致的无法退票成功，本公司概不承担损失。</br>
					4、自行前往火车站办理退票，客户在站台不能直接拿到款项，扣除退票费后的款项将被铁道部退还到本公司账户，本公司在收到退款后当日办理原路退款并发送退款短信。</br>
					改签：</br>
					1、本公司暂不支持火车票改签申请。</br>
					2、预订成功后，如需办理订单内的车票改签，您须携带预订时所使用的乘车人有效身份证件原件，如已取票，需带好纸质车票，在列车开车前前往车站改签窗口办理相关手续。</br>
					第六条 </br>
					1、产品预订失败或需差价退款，本公司将在确认后当日退款至原支付渠道，由银行将所有支付款项全额退回。到账日期一般为3-7个工作日。</br>
					2、自行前往火车站办理退票，本公司将在确认收到退款后当日退款至原支付渠道，由银行将所有支付款项全额退回。到账日期一般为3-7个工作日。</br>
					3、如在收到本公司的退票成功短信后，规定时间内未收到退款，请客户直接致电原支付方式的所属银行咨询。</br>
					第七条 </br>
					1、因全国各铁路局会随时调整车次、票价、坐席等信息，故本网显示产品信息，如车次、票价、坐席信息等仅供参考，最终以实际购买的产品为准。</br>
					2、因全国各铁路局会随时调整车次，或因自然灾害等不可抗力因素导致的火车停运等问题，本公司不承担责任。</br>
					3、如因客户提供错误的订单信息（姓名、证件号码、日期、车次、座位类型等）或者因客户自身原因导致无法取票、车票丢失、 车票损毁等情况所导致的损失，客户需自行承担相关损失后果。</br>
					4、由于全国各铁路局对火车票售票的不同规定与要求，本公司目前无法承诺百分之百购买到火车票。</br>
					第八条 解决争议适用法律法规约定</br>
					在您的预订生效后，如果在本协议或订单约定内容履行过程中，您对相关事宜的履行发生争议，您同意按照中华人民共和国颁布的相关法律法规来解决争议，并同意接受苏州市工业园区人民法院的管辖。</br>
					</br>
					1、请输入正确的证件号码，乘客姓名与证件号码必须与乘车时所使用证件上的名字和号码一致。</br>
					2、您的支付信息是安全的，支付成功后，在未得到您的许可下本公司不会以任何名义随便调取您的支付信息。</br>
					3、支付成功后，本公司会短信通知您出票情况，请您耐心等待。本公司给您发送的出票短信，请不要删除，以备不时之需。</br>
					4、订单已出票且未换取纸质车票的，在发车前3小时前可以在线申请退票。我们的退票处理时间是06:00-22:50。非工作时间或者已取票的乘客， 如需退票，请凭购票时的有效证件在发车前到火车站退票窗口办理退票。</br>
					5、确认预订成功后，您需携带预订时使用的有效身份证件换取纸质车票后乘车，部分高铁动车车次支持刷二代身份证直接检票乘车。</br>
					6、由于取票后，我方无法为您办理退款操作，只能您自行前往火车站办理，所以建议您在实际火车出发前2小时内换取纸质车票。</br>
				</div>
			</div>
			<div class="kp-mb-li">
				<div class="kp-mb-div" @click="helpHotel(2)">
					<span>2.如何取票？</span>
					<em :class="showDetilenum==2?'active':''"></em>
				</div>
				<div class="kp-mbbot" v-show="showDetilenum==2">
					您好，1.若您使用二代居民身份证进行的预订，可凭预订时所使用的乘车人有效身份证件原件到车站售票窗口、铁路客票代售点或车站自动售票机上办理换票手续。</br>
					2.若您持有的二代居民身份证无法自动识读,或者使用二代居民身份证以外的其他有效身份证件预订的，可凭预订时所使用的乘车人有效证件原件和以"E"开头的电子取票号到车站售票窗口、铁路客票代售点，由售票员录入证件号码和电子取票号码并核实后办理换票手续。</br>
					3.如持非身份证购票，请携带购票证件原件到人工窗口进行取票，有任何疑问请立即到值班经理室咨询处理。</br>
				</div>
			</div>
			<div class="kp-mb-li">
				<div class="kp-mb-div" @click="helpHotel(3)">
					<span>3.如何退票？</span>
					<em :class="showDetilenum==3?'active':''"></em>
				</div>
				<div class="kp-mbbot" v-show="showDetilenum==3">
					您好，1.未取票、且发车前时间大于3小时，可点击“我的订单”自助申请退票。2.已取票，或发车前时间小于3小时，需您自行携带购票时所使用的乘车人有效证件原件和火车票在发车前去火车站退票窗口办理退票。
				</div>
			</div>
			<div class="kp-mb-li">
				<div class="kp-mb-div" @click="helpHotel(4)">
					<span>4.如何取消订单？</span>
					<em  :class="showDetilenum==4?'active':''"></em>
				</div>
				<div class="kp-mbbot" v-show="showDetilenum==4">
					您好，您可以在订单中心找到您的订单点击取消；如您的订单全部取消成功，下单仍提示失败，请您来电告知，客服可帮您取消占座信息，取消成功五分钟左右即可重新下单占座。
				</div>
			</div>
			<div class="kp-mb-li">
				<div class="kp-mb-div" @click="helpHotel(5)">
					<span>5.夜间能出票吗？</span>
					<em :class="showDetilenum==5?'active':''"></em>
				</div>
				<div class="kp-mbbot" v-show="showDetilenum==5">
					您好：客官，夜间23:00—6:00点火车站系统已打烊，您在23：00之后预订的订单，小二将在早6:00火车站系统开放时，准点为您抢座位啦，早8:00前回复您出票结果哦！如果出票成功：将收到出票成功短信（包含您的车次信息哦）；如果没有抢到座位，小二只能很抱歉，第一时间给您办理全额给您退款，款项会于7-15个工作日内退回到您的原支付账号，客官只需注意查收通知短信即可~
				</div>
			</div>
		</div>
		<!--景区-->
		<div class="kp-al-box" v-if="helpnum=='3'">
			<div class="kp-mb-li">
				<div class="kp-mb-div" @click="helpHotel(1)">
					<span>1.查看景点</span>
					<em :class="showDetilenum==1?'active':''"></em>
				</div>
				<div class="kp-mbbot" v-show="showDetilenum==1">
					进入“景点”频道；在搜索框中输入您想查询的城市或景区名称，如“苏州乐园”； 点击“搜索”按钮，系统将显示符合搜索条件的景区信息。 在搜索结果中，点击“查看详情”，即可查看该景点的详细信息。
				</div>
			</div>
			<div class="kp-mb-li">
				<div class="kp-mb-div" @click="helpHotel(2)">
					<span>2.提交订单</span>
					<em :class="showDetilenum==2?'active':''"></em>
				</div>
				<div class="kp-mbbot" v-show="showDetilenum==2">
					选择您需要的门票类型，点击“预定”按钮，即可进入预定页面。选择“游玩日期”及“门票数量”；填写“取票人姓名”及“手机号码”；点击“同意以下协议并提交订单”按钮，即可下单成功。
				</div>
			</div>
			<div class="kp-mb-li">
				<div class="kp-mb-div" @click="helpHotel(3)">
					<span>3.支付订单</span>
					<em :class="showDetilenum==3?'active':''"></em>
				</div>
				<div class="kp-mbbot" v-show="showDetilenum==3">
					您可以选择任一合适您的“支付渠道”；根据页面提示，填写您支付信息即可完成支付。
				</div>
			</div>
			<div class="kp-mb-li">
				<div class="kp-mb-div" @click="helpHotel(4)">
					<span>4.查看订单</span>
					<em  :class="showDetilenum==4?'active':''"></em>
				</div>
				<div class="kp-mbbot" v-show="showDetilenum==4">
					登录快票账户进入“我的”页面
				</div>
			</div>
			<div class="kp-mb-li">
				<div class="kp-mb-div" @click="helpHotel(5)">
					<span>5.景点点评</span>
					<em :class="showDetilenum==5?'active':''"></em>
				</div>
				<div class="kp-mbbot" v-show="showDetilenum==5">
					在我的页面左侧，点击“景点订单”，即可查看您所有“进行中”与“已结束”的景点订单出游完毕后，可在对应的景点订单的订单操作栏点击“点评”按钮即可参与点评。
				</div>
			</div>
			<div class="kp-mb-li">
				<div class="kp-mb-div" @click="helpHotel(6)">
					<span>6.景区流程动画演示</span>
					<em :class="showDetilenum==6?'active':''"></em>
				</div>
				<div class="kp-mbbot" v-show="showDetilenum==6">
					告知用户，在预订成功后，如何换票入园，在旅途中遇到问题寻求帮助的方法。
				</div>
			</div>
		</div>
		<!--汽车-->
		<div class="kp-al-box" v-if="helpnum=='4'">
			<div class="kp-mb-li">
				<div class="kp-mb-div" @click="helpHotel(1)">
					<span>1.为什么出发地栏提示找不到输入的城市名称？</span>
					<em :class="showDetilenum==1?'active':''"></em>
				</div>
				<div class="kp-mbbot" v-show="showDetilenum==1">
					该区域暂未开通网上预售票功能，您暂不能预订。
				</div>
			</div>
			<div class="kp-mb-li">
				<div class="kp-mb-div" @click="helpHotel(2)">
					<span>2.为什么车次信息中没显示目的地车站名？</span>
					<em :class="showDetilenum==2?'active':''"></em>
				</div>
				<div class="kp-mbbot" v-show="showDetilenum==2">
					快票暂时无法查询到目的地车站信息，建议您向乘车站窗口或咨询台工作人员进行咨询
				</div>
			</div>
			<div class="kp-mb-li">
				<div class="kp-mb-div" @click="helpHotel(3)">
					<span>3.可以预订儿童票吗？</span>
					<em :class="showDetilenum==3?'active':''"></em>
				</div>
				<div class="kp-mbbot" v-show="showDetilenum==3">
					目前暂时无法预订儿童票，请您到发车站指定窗口进行咨询购买
				</div>
			</div>
			<div class="kp-mb-li">
				<div class="kp-mb-div" @click="helpHotel(4)">
					<span>4.可以提前几天购票？</span>
					<em  :class="showDetilenum==4?'active':''"></em>
				</div>
				<div class="kp-mbbot" v-show="showDetilenum==4">
					各地订票预售期在5-10天不等，具体以实际预售期为准。
				</div>
			</div>
			<div class="kp-mb-li">
				<div class="kp-mb-div" @click="helpHotel(5)">
					<span>5.订票成功后为什么没显示座位号信息？</span>
					<em :class="showDetilenum==5?'active':''"></em>
				</div>
				<div class="kp-mbbot" v-show="showDetilenum==5">
					由于订票时无法在线选座，因此取票信息中不包含座位号，您去车站取票时取票系统会自动生成座位号。
				</div>
			</div>
			<div class="kp-mb-li">
				<div class="kp-mb-div" @click="helpHotel(6)">
					<span>6.订票能否用护照或其他有效证件购票呢？</span>
					<em :class="showDetilenum==6?'active':''"></em>
				</div>
				<div class="kp-mbbot" v-show="showDetilenum==6">
					订票只支持大陆居民第二代身份证号码，其他证件无法下单购票。
				</div>
			</div>
			<div class="kp-mb-li">
				<div class="kp-mb-div" @click="helpHotel(7)">
					<span>7.订票成功后没有收到取票短信怎么办？</span>
					<em :class="showDetilenum==7?'active':''"></em>
				</div>
				<div class="kp-mbbot" v-show="showDetilenum==7">
					如未收到取票短信，您可以登录快票客户端订单中心查询我的订单，记录取票信息。如查询不到，建议在发车前半小时来电快票客服400-668-8090咨询具体取票信息。
				</div>
			</div>
			<div class="kp-mb-li">
				<div class="kp-mb-div" @click="helpHotel(8)">
					<span>8.不取票/凭取票号可以直接进站吗？</span>
					<em :class="showDetilenum==8?'active':''"></em>
				</div>
				<div class="kp-mbbot" v-show="showDetilenum==8">
					快票订票后需要去车站换取纸质车票，如有特殊情况，视车站实际情况为准。
				</div>
			</div>
			<div class="kp-mb-li">
				<div class="kp-mb-div" @click="helpHotel(9)">
					<span>9.订票能否用护照或其他有效证件购票呢？</span>
					<em :class="showDetilenum==9?'active':''"></em>
				</div>
				<div class="kp-mbbot" v-show="showDetilenum==9">
					订票只支持大陆居民第二代身份证号码，其他证件无法下单购票。
				</div>
			</div>
			<div class="kp-mb-li">
				<div class="kp-mb-div" @click="helpHotel(10)">
					<span>10.订票成功后发现填写的手机号码错误该怎么办？</span>
					<em :class="showDetilenum==10?'active':''"></em>
				</div>
				<div class="kp-mbbot" v-show="showDetilenum==10">
					订票时填写的手机号码错误会导致您无法收到取票短信，您可以登录快票用户中心查询我的订单，记录取票信息，凭取票信息和身份证取票。如订单中心查询不到具体的取票信息，建议发车前半小时来电快票客服400-668-8090咨询具体取票信息。
				</div>
			</div>
		</div>
	</article>
</template>

<script>
	import { XInput, Group, XButton } from 'vux'
	export default {
		data() {
			return {
				pageHeight: '',
				showDetilenum: 0,
				helpnum:'',
				arr:[],
			}
		},
		mounted() { //载入后执行
			var h = document.documentElement.clientHeight || document.body.clientHeight;
			this.pageHeight = h;
		},
		created() { //创建后
			this.gethelp();
		},
		watch: { //监听放置
			"$route":"gethelp"
		},
		methods: { //方法放置
			gethelp(){
				this.helpnum = this.$route.query.help;
			},
			helpHotel(index){
				if(this.arr[0] ==index){
					this.showDetilenum = 0;
					this.arr = [];
					
				}else{
					this.arr = [];
					this.showDetilenum = index;
					this.arr.push(index);
				}
			}
		},
		components: {
			XInput,
			Group,
			XButton
		}
	}
</script>

<style scoped>
	/* //手机号部分 */
	
	.kp-helpPronb {
		background: #f4f5f9;
	}
	
	.kp-al-box {
		width: 100%;
		padding-top: 106px;
		position: relative;
		margin-top: 0;
		margin-bottom: 0;
		padding-left: 0;
		list-style: none;
	}
	
	.kp-mb-li {
		width: 100%;
		background: #fff;
	}
	
	.kp-mb-li span {
		font-size: 32px;
		color: rgb(51, 51, 51);
		position: relative;
		width: 100%;
		display: inline-block;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	
	.kp-mb-li .kp-mb-div {
		width: 100%;
		position: relative;
		overflow: hidden;
		padding: 22px 30px;
		-webkit-touch-callout: none;
		box-sizing: border-box;
		border-bottom:1px solid #c8c7cc;
	}
	
	.kp-mb-div>em {
		position: absolute;
		width: 14px;
		height: 26px;
		display: inline-block;
		right: 20px;
		top: 50%;
		margin-top: -12px;
		background: url(../../../assets/right-1.png) no-repeat right center;
		background-size: 14px 26px;
	}
	.kp-mb-div>em.active{
		transform: rotate(90deg);
	}
	.kp-mbbot {
		background: #eee;
		max-height: 600px;
		overflow: auto;
		width: 100%;
		padding: 24px 30px;
		word-wrap: break-word;
		color: #8f8f94;
		font-size: 26px;
		box-sizing: border-box;
		line-height: 1.5;
	}
</style>